<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="5"
        :searchSize="12"
        :otherSize="-1"
        justify="center"
        :searchStyle="{ height: '100px', backgroundColor: '#fff' }"
        :logoStyle="{ fontSize: '100px' }"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <div style="width: 1000px; margin: 10px auto; color: #3271ae; font-weight: 600;"> 全部商品 {{ this.data.length }} </div>
      <div>
        <el-table
          ref="multipleTableRef"
          :data="data"
          style="width: 1000px; margin: 0 auto; --el-color-primary: #3271ae"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />

          <el-table-column
            label="商品"
            width="350px"
          >
            <template #default="scope">
              <div style="display: flex; flex-direction: row;">
                <el-image
                  :src="scope.row.image"
                  style="width: 100px; height: 100px;"
                ></el-image>
                <div class="text">
                  {{ scope.row.commodityName.length > 29 ?  scope.row.commodityName.slice(0, 28) : scope.row.commodityName}}
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="单价">
            <template #default="scope">
              <div style="font-size: 14px; font-weight: 400;">￥{{ scope.row.price }}</div>
            </template>
          </el-table-column>

          <el-table-column label="数量">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.number"
                min="1"
                size="small"
                @click="handleShoppingCartUpdateNumber(scope.row.shoppingCartId, scope.row.number)"
              ></el-input-number>
            </template>
          </el-table-column>

          <el-table-column label="小计">
            <template #default="scope">
              <div style="font-size: 14px; font-weight: 400;">￥{{ (scope.row.price * scope.row.number).toFixed(2) }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <div
                class="operation"
                @click="handleDelete(scope.row.shoppingCartId)"
              >删除</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <summarize
        :quantity="multipleSelection.length"
        :totalPrice="sumPrice"
        :shoppingCartIds="selectedShoppingCartIds"
        @choose="this.$refs.multipleTableRef.toggleAllSelection()"
        @delIds="handleDeletes()"
      ></summarize>
    </el-main>
    <el-footer> </el-footer>
  </el-container>
</template>

<script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/shoppingCart/SearchBar.vue";
import SummarizeVue from "@/components/shoppingCart/Summarize.vue";
import {
  shoppingCartAll,
  shoppingCartDel,
  shoppingCartUpdateNumber,
} from "@/api/shoppingCart";

import { ElMessage } from "element-plus";

export default {
  components: {
    NHeader: NHeaderVue,
    NSearchBar: NSearchBarVue,
    SearchBar: SearchBarVue,
    Summarize: SummarizeVue,
  },
  computed: {
    sumPrice() {
      var total = 0;
      this.multipleSelection.forEach((v, i, a) => {
        total += v.price * v.number;
      });

      return total.toFixed(2);
    },
    selectedShoppingCartIds() {
      var ids = [];

      this.multipleSelection.forEach((v, i, a) => {
        ids.push(v.shoppingCartId);
      });
      
      return ids;
    },
  },
  data() {
    return {
      data: [],
      multipleTableRef: [],
      multipleSelection: [],
      totalPrice: 0,
    };
  },
  methods: {
    doShoppingCartAll() {
      shoppingCartAll().then((res) => {
        this.data = res;
      });
    },
    doShoppingCartDel(val) {
      shoppingCartDel(val).then((res) => {
        val.forEach((v, i, a) => {
          this.data = this.data.filter((v1, i1, a1) => v1.shoppingCartId != v);
        });
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      });
    },
    doShoppingCartUpdateNumber(id, number) {
      shoppingCartUpdateNumber(id, number).then((res) => {
        ElMessage({
          message: "更新成功",
          type: "success",
        });
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(val) {
      this.doShoppingCartDel([val]);
    },
    handleDeletes() {
      var array = this.multipleSelection.map((v, i, a) => {
        return v.shoppingCartId;
      });
      this.doShoppingCartDel(array);
    },
    handleShoppingCartUpdateNumber(id, number) {
      this.doShoppingCartUpdateNumber(id, number);
    },
  },
  created() {
    this.doShoppingCartAll();
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.text {
  width: 200px;
  margin-left: 5px;
}

.operation {
  color: #999;
  cursor: pointer;
}

.operation:hover {
  color: #3271ae;
}
</style>